<div class="animate grid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Twelve</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Six</h6></div>
                </div>
            </div>

        </div>

        <div class="col-sm-6">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Six</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Four</h6></div>
                </div>
            </div>

        </div>

        <div class="col-sm-4">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Four</h6></div>
                </div>
            </div>

        </div>

        <div class="col-sm-4">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Four</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Three</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-3">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Three</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-3">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Three</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-3">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Three</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-5">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Five</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-7">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Seven</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Four</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-8">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Eight</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Three</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-9">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Nine</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Two</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-10">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Ten</h6></div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>One</h6></div>
                </div>
            </div>

        </div>
        <div class="col-sm-11">
            <div class="card card-default">

                <div class="card-block">
                    <div class="text-center"><h6>Eleven</h6></div>
                </div>
            </div>

        </div>
    </div>
</div>
